<template>
	<div class="holiday-config-container">
		<el-dialog
			title="节假日配置"
			v-model="dialogVisible"
			width="50%"
			:close-on-click-modal="false"
		>
			<div class="config-header">
				<el-button type="primary" size="small" @click="handleAdd">新增节日</el-button>
			</div>
			<el-table :data="holidayList" border style="width: 100%">
				<el-table-column prop="name" label="节日名称" width="180"></el-table-column>
				<el-table-column prop="date" label="节日日期" width="180">
					<template #default="{ row }">
						{{ row.isLunar ? row.date + '(农历)' : row.date }}
					</template>
				</el-table-column>
				<el-table-column prop="templateId" label="短信模板" show-overflow-tooltip>
					<template #default="{ row }">
						{{ getTemplateName(row.templateId) }}
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" width="100">
					<template #default="{ row }">
						<el-switch v-model="row.status" :active-value="1" :inactive-value="0"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="150" align="center">
					<template #default="{ row }">
						<el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
						<el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 节日编辑弹窗 -->
			<el-dialog
				:title="editForm.id ? '编辑节日' : '新增节日'"
				v-model="editDialogVisible"
				width="40%"
				:close-on-click-modal="false"
				append-to-body
			>
				<el-form :model="editForm" label-width="100px">
					<el-form-item label="节日名称" required>
						<el-input v-model="editForm.name" placeholder="请输入节日名称"></el-input>
					</el-form-item>
					<el-form-item label="日期类型">
						<el-radio-group v-model="editForm.isLunar">
							<el-radio :label="false">公历</el-radio>
							<el-radio :label="true">农历</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="节日日期" required>
						<el-date-picker
							v-model="editForm.date"
							type="date"
							placeholder="选择日期"
							format="MM-DD"
							value-format="MM-DD"
						></el-date-picker>
					</el-form-item>
					<el-form-item label="短信模板" required>
						<el-select v-model="editForm.templateId" placeholder="请选择短信模板">
							<el-option
								v-for="template in templateList"
								:key="template.id"
								:label="template.name"
								:value="template.id"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="是否启用">
						<el-switch v-model="editForm.status" :active-value="1" :inactive-value="0"></el-switch>
					</el-form-item>
				</el-form>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="editDialogVisible = false">取消</el-button>
						<el-button type="primary" @click="handleSave">确定</el-button>
					</span>
				</template>
			</el-dialog>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="holidayConfig">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

// 弹窗显示控制
const dialogVisible = ref(false);
const editDialogVisible = ref(false);

// 节日列表数据
const holidayList = ref([]);

// 短信模板列表
const templateList = ref([]);

// 编辑表单数据
const editForm = reactive({
	id: '',
	name: '',
	isLunar: false,
	date: '',
	templateId: '',
	status: 1
});

// 获取模板名称
const getTemplateName = (templateId) => {
	const template = templateList.value.find(t => t.id === templateId);
	return template ? template.name : '';
};

// 获取节日列表
const getHolidayList = () => {
	// 这里调用获取节日列表的API
	setTimeout(() => {
		holidayList.value = [
			{
				id: 1,
				name: '春节',
				isLunar: true,
				date: '01-01',
				templateId: 1,
				status: 1
			}
		];
	}, 500);
};

// 获取模板列表
const getTemplateList = () => {
	// 这里调用获取模板列表的API
	setTimeout(() => {
		templateList.value = [
			{
				id: 1,
				name: '节日祝福模板',
				content: '尊敬的客户，祝您节日快乐！'
			}
		];
	}, 500);
};

// 新增节日
const handleAdd = () => {
	editForm.id = '';
	editForm.name = '';
	editForm.isLunar = false;
	editForm.date = '';
	editForm.templateId = '';
	editForm.status = 1;
	editDialogVisible.value = true;
};

// 编辑节日
const handleEdit = (row) => {
	Object.assign(editForm, row);
	editDialogVisible.value = true;
};

// 删除节日
const handleDelete = (row) => {
	// 这里调用删除节日的API
	ElMessage.success('删除成功');
	getHolidayList();
};

// 保存节日
const handleSave = () => {
	if (!editForm.name) {
		ElMessage.warning('请输入节日名称');
		return;
	}
	if (!editForm.date) {
		ElMessage.warning('请选择节日日期');
		return;
	}
	if (!editForm.templateId) {
		ElMessage.warning('请选择短信模板');
		return;
	}

	// 这里调用保存节日的API
	ElMessage.success('保存成功');
	editDialogVisible.value = false;
	getHolidayList();
};

// 初始化
getHolidayList();
getTemplateList();

// 对外暴露方法
defineExpose({
	dialogVisible
});
</script>

<style scoped lang="scss">
.holiday-config-container {
	.config-header {
		margin-bottom: 15px;
	}
}
</style>